<template>
  <el-button type="primary" :icon="Plus" @click="addSpuAttr">添加SPU</el-button>
  
  <el-table border style="width: 100%;margin:20px 0" :data="SpuList">
    <el-table-column type="index" label="序号" align="center" width="100" />
    <el-table-column prop="spuName" label="SPU名称" width="180" align="center" />
    <el-table-column prop="description" label="SPU描述" align="center" />
  
    <el-table-column prop="address" label="操作" align="center">
  
  
    <template v-slot="{row,$index}">
      <el-button type="primary" title="添加Sku" :icon="Plus" @click='addSku(row)'></el-button>
      <el-button type="primary" :icon="Edit" title="修改sPU" @click="changeSpu(row)" ></el-button>
      <el-button type="info" :icon="InfoFilled" title="查看sku列表"></el-button>
      <el-popconfirm title="您真的要删除此属性吗?" @confirm="confirmEvent(row,$index)">
        <template #reference>
          <el-button type="danger" :icon="Delete" title="删除spu"></el-button>
        </template>
      </el-popconfirm>
      
    </template>
  
  
    </el-table-column>
  
  
  </el-table>
  
  
  
  <!-- 分液器 -->
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[7, 8, 10, 14]"
    :small="small" :disabled="disabled" :background="background" layout=" prev, pager, next, jumper,->, sizes, total"
    :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  
 
</template>

<script lang="ts">
  export default {
    name:'SpuLIst'
  }
</script>
<script lang="ts" setup>
import { ref ,watch} from "vue";
import { reqGetSpuListApi ,reqDeleteSpuinfoData} from "@/api/product/spu"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  InfoFilled,
  Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useCategorySelectorStore } from "@/stores/CategoryList"
import {ShowStatus} from "./type"
const Selector=useCategorySelectorStore()
const currentPage = ref(1)
const emits = defineEmits(["ShowStatus","getSpuInfo"])

const pageSize = ref(3)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total = ref(0)
//定义属性列表的数据
const SpuList=ref([])
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSpuListData();
}
const handleCurrentChange = (val: number) => {
  currentPage.value=val
  getSpuListData()
}

//1获取列表数据时，我要发送请求，将返回的数据放在spuLIST
const getSpuListData =async () => {
  const result = await reqGetSpuListApi(currentPage.value, pageSize.value, Selector.category3Id)
  console.log(result)
  SpuList.value = result.records
total.value=result.total

}
//2:监视3级id
watch(
  () => Selector.category3Id as number,
  (category3Id) => {
    if (!category3Id) {
      SpuList.value = [];
      return 
    }
    //获取数据
    getSpuListData()
    ElMessage.success('属性获取成功了')
 
  }, {
    immediate:true
  }
)
//3添加spu
const addSpuAttr = () => {
  //跳转到spuform界面
  emits('ShowStatus', ShowStatus.Add_SPU)
  //成功的提示
  ElMessage.success('成功跳转到了spuform')


}
//4删除spuInfo
//删除一条销售属性
const confirmEvent =async (row) => {
  await reqDeleteSpuinfoData(row.id)
  ElMessage.success('删除成功了')
 getSpuListData()

}
const changeSpu = (row) => {
  emits('ShowStatus', ShowStatus.Add_SPU)
 emits('getSpuInfo',row)
}
//跳转到skuform假面
const addSku = (row) => {
  emits('ShowStatus', ShowStatus.ADD_SKU)
  emits('getSpuInfo',row)
}
</script>

<style lang="scss" scoped>

</style>